import React, { useState, useEffect } from 'react'
import '../style/massage.css'
import { useParams } from 'react-router-dom'
import axios from '../../utils/http'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message, Upload } from 'antd';

const zengbeforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

export default function massage() {
  const { id } = useParams()
  const [from, setFrom] = useState({
    _id: id,
    store: '',
    contactPerson: '',
    phone: '',
    service: '',
    detailAddr: '',
    businessDistrict: '',
    address: '',
    houseNumber: '',
    businessTime: '',
    IDCard: '',
    IDImgUrlFront: '', // 身份证正面照
    IDImgUrlVerso: '', // 身份证反面照
    businessImgUrl: '', // 营业执照
    doorPhotoImgUrl: '',     // 门头照
    otherPhotos: '',    // 其他照片（数组）
  });

  const getMassage = async () => {
    const res = await axios.get('/yjr/massage', { params: { _id: id } });
    console.log(res.massage);
    setFrom({
      ...from,
      store: res.massage.store,
      phone: res.massage.phone,
      contactPerson: res.massage.contactPerson,
      service: res.massage.service,
      detailAddr: res.massage.detailAddr,
      businessDistrict: res.massage.businessDistrict,
      address: res.massage.address,
      houseNumber: res.massage.houseNumber,
      IDCard: res.massage.IDCard,
      businessTime: res.massage.businessTime,
      IDImgUrlFront: res.massage.IDImgUrlFront, // 初始化正面照路径
      IDImgUrlVerso: res.massage.IDImgUrlVerso, // 初始化反面照路径
      businessImgUrl: res.massage.businessImgUrl, // 初始化营业执照路径
      doorPhotoImgUrl: res.massage.doorPhotoImgUrl, // 初始化门头照路径
      otherImgUrl: res.massage.otherImgUrl, // 初始化其他照片路径
    });
  };

  useEffect(() => {
    getMassage()
  }, [])

  const [loading, setLoading] = useState(false);

  const handleImageUpload = (fileType, info) => {
    if (info.file.status === 'uploading') {
      return;
    }
    if (info.file.status === 'done') {
      const response = info.file.response;
      if (response.code === 200) {
        setFrom((prevForm) => ({
          ...prevForm,
          [fileType]: response.path // 更新对应字段
        }));
      }
    }
  };

  const zenghandleChange = (info) => handleImageUpload('IDImgUrlFront', info);

  const handleSubmit = async () => {
    const res = await axios.post('/yjr/update', from)
    if(res.code == 200){
      getMassage()
    }
  }

  const zenguploadButton = (
    <button
      style={{
        color: 'white',
        border: "none",

      }}
      type="button"
    >
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
      >
        身份证正面照
      </div>
    </button>
  );
  return (
    <div className='massage-box'>

      <div>
        <h1 style={{ marginLeft: '1rem', marginTop: '1rem' }}>基础信息</h1>
        <div className='massage'>
          <p>基础信息</p>
          <p><input type="text" value={from.store} onChange={(e) => { setFrom({ ...from, store: e.target.value }) }} /></p>
        </div>

        <div className='massage'>
          <p>联系人</p>
          <p><input type="text" value={from.contactPerson} onChange={(e) => { setFrom({ ...from, contactPerson: e.target.value }) }} /></p>
        </div>

        <div className='massage'>
          <p>联系人电话</p>
          <p><input type="text" value={from.phone} onChange={(e) => { setFrom({ ...from, phone: e.target.value }) }} /></p>
        </div>

        <div className='massage'>
          <p>服务分类</p>
          <p><input type="text" value={from.service} onChange={(e) => { setFrom({ ...from, service: e.target.value }) }} /></p>
        </div>

        <div className='massage'>
          <p>地区</p>
          <p><input type="text" value={from.detailAddr} onChange={(e) => { setFrom({ ...from, detailAddr: e.target.value }) }} /></p>
        </div>

        <div className='massage'>
          <p>所在商圈</p>
          <p><input type="text" value={from.businessDistrict} onChange={(e) => { setFrom({ ...from, businessDistrict: e.target.value }) }} /></p>
        </div>

        <div className='massage'>
          <p>详细地址</p>
          <p><input type="text" value={from.address} onChange={(e) => { setFrom({ ...from, address: e.target.value }) }} /></p>
        </div>

        <div className='massage'>
          <p>门牌号</p>
          <p><input type="text" value={from.houseNumber} onChange={(e) => { setFrom({ ...from, houseNumber: e.target.value }) }} /></p>
        </div>
        <div className='massage'>
          <p>营业时间</p>
          <p><input type="text" value={from.businessTime} onChange={(e) => { setFrom({ ...from, businessTime: e.target.value }) }} /></p>
        </div>
      </div>


      <div>
        <h1 style={{ marginLeft: '1rem', marginTop: '1rem' }}>身份信息</h1>
        <div className='massage'>
          <p>身份证号</p>
          <p><input type="text" value={from.IDCard} onChange={(e) => { setFrom({ ...from, IDCard: e.target.value }) }} /></p>
        </div>

        <div>
          <p style={{ marginTop: '1rem', marginLeft: '1rem' }}>身份证正反面</p>
          <div className='massage-sf'>
            <Upload
              listType="picture-card"
              className="zhao pian1"
              showUploadList={false}
              action="http://localhost:3000/yjr/upload"
              beforeUpload={zengbeforeUpload}
              onChange={zenghandleChange}
            >
              {from.IDImgUrlFront ? (
                <img src={from.IDImgUrlFront} alt="avatar" style={{ width: '100%', height: '100%' }} />
              ) : (
                zenguploadButton
              )}
            </Upload>
            <div className="zhao pian1">
              <img src={from.IDImgUrlVerso} alt="avatar" style={{ width: '100%', height: '100%' }} />
            </div>
          </div>
        </div>
      </div>


      <div>
        <h1 style={{ marginLeft: '1rem', marginTop: '1rem' }}>商家信息</h1>

        <div>
          <p style={{ marginLeft: '1rem', marginTop: '1rem' }}>营业执照</p>
          <div className='massage-s'>
            <div className='zhao pian2'>
              <img src={from.businessImgUrl} alt="avatar" style={{ width: '100%', height: '100%' }} />
            </div>
          </div>
        </div>

        <div>
          <p style={{ marginLeft: '1rem' }}>门头照</p>
          <div className='massage-s'>
            <div className='zhao pian2'>
              <img src={from.doorPhotoImgUrl} alt="avatar" style={{ width: '100%', height: '100%' }} />
            </div>
          </div>
        </div>

        <div>
          <p style={{ marginLeft: '1rem' }}>其他照片（环境照，产品照等）</p>
          <div className='massage-s'>
            <div className='zhao pian2'>
              <img src={from.otherImgUrl} alt="avatar" style={{ width: '100%', height: '100%' }} />
            </div>
          </div>
        </div>
      </div>

      <div style={{ width: '100%', margin: '5rem 0', textAlign: 'center' }}>
        <button className='but' onClick={handleSubmit}>修改信息</button>
      </div>
    </div>
  )
}
